<template>
	<view>
		<tui-list-view color="#777">
			<tui-list-cell>
				<view class="uni-flex uni-row">
					<view class="uni-flex-item" style="flex:3">
						<view class="tui-info">
							<image :src="avatarUrl" class="tui-my-bg uni-center" mode="aspectFit"></image>
						</view>
					</view>
					<view class="uni-flex-item uni-flex uni-column"
						style="-webkit-flex: 1;flex: 8;height: 400rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
						<view class="text uni-flex" style="padding: 10px;float: left;">{{nickName}}</view>
						<!-- <view class="text uni-flex" style="padding: 10px;float: left;">{}}</view> -->
					</view>
					<view></view>
				</view>
			</tui-list-cell>
			<!-- <tui-list-cell @click="toOrderList" :arrow="true">
			<view class="tui-item-box">
				<tui-icon name="order" style="padding:2px;font-size:20px;" :size="20" color="#ff7900"></tui-icon>
				<text class="tui-list-cell_name">我的订单</text>
			</view>
		</tui-list-cell> -->
			<!-- <tui-list-cell @click="detail" :arrow="true">
			<view class="tui-item-box">
				<tui-icon name="histogram" style="padding:2px;font-size:20px;" :size="20" color="#5677fc"></tui-icon>
				<view class="tui-list-cell_name">数据</view>
			</view>
		</tui-list-cell> -->
			<!-- <tui-list-cell @click="toFriendList" :arrow="true">
			<view class="tui-item-box">
				<tui-icon name="people-fill" style="padding:2px;font-size:20px;" :size="20" color="#5677fc"></tui-icon>
				<view class="tui-list-cell_name">通讯录</view>
			</view>
		</tui-list-cell>
		<tui-list-cell @click="toCollection" :arrow="true">
			<view class="tui-item-box">
				<tui-icon name="label" style="padding:2px;font-size:20px;" :size="20" color="#19be6b"></tui-icon>
				<view class="tui-list-cell_name">标记</view>
				<view class="tui-ml-auto">
				</view>
			</view>
		</tui-list-cell> -->
			<tui-list-cell @click="call" :arrow="true">
				<view class="tui-item-box">
					<tui-icon name="kefu" style="padding:2px;font-size:20px;" :size="20" color="#ed3f14"></tui-icon>
					<view class="tui-list-cell_name">客服</view>
					<!-- <view class="tui-right">进入店铺</view> -->
				</view>
			</tui-list-cell>
			<!-- <tui-list-cell @click="toSet" :arrow="true">
			<view class="tui-item-box">
				<tui-icon name="setup-fill" style="padding:2px;font-size:20px;" :size="20" color="#ed3f14"></tui-icon>
				<view class="tui-list-cell_name">设置</view>
				<view class="tui-right">进入店铺</view>
			</view>
		</tui-list-cell> -->
		</tui-list-view>
	</view>
</template>

<script>
	import userInfo from '@/common/getUserInfoByteDance.js'
	import tui from '../../common/tui.js'
	export default {
		onShow() {
			let that = this
			let callback = function() {
				that.getNickName()
			}
			userInfo.getUserInfo(callback)
			tt.showDouyinOpenAuth({
				scopes: {
					"video.create": 0,
					"video.delete": 0,
					"video.data": 0,
					"video.list": 0
				},
				success: (res) => {
					tui.tGetAction('/callback/login/api/login', {
						'code': res.ticket,
						'douyinId':tt.getStorageSync("douyinId")
					}).then(res => {
						if (res.code == 200) {
							console.log("success.res.result", res.result);
							tt.setStorageSync("access_token",res.result)
						}
					})
				},
				fail: (res) => {
					console.log("fail", res);
				},
				complete: (res) => {
					console.log("complete", res);
				},
			});
			this.getNickName()
		},
		onLoad: function(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif

			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		data() {
			return {
				width: 0,
				height: 0,
				top: 0,
				scrollH: 0,
				avatarUrl: '/static/images/my/mine_def_touxiang_3x.png',
				nickName: '匿名'
			}
		},
		methods: {
			getNickName() {
				let that = this
				tt.getStorage({
					key: "userInfo",
					success(res) {
						that.avatarUrl = res.data['avatarUrl']
						that.nickName = res.data['nickName']
					},
					fail(res) {
						console.log("userInfocacheFail")
					}
				});
			},
			toUserInfo: function() {
				uni.navigateTo({
					url: 'userInfo/userInfo'
				})
			},
			toOrderList: function() {
				tt.navigateTo({
					url: '../mall/service-mall-order/service-mall-order'
				})
			},
			toFriendList: function() {
				uni.navigateTo({
					url: 'friendList/friendList'
				})
			},
			toCollection: function() {
				uni.navigateTo({
					url: 'collection/collection'
				})
			},
			call: function() {
				uni.makePhoneCall({
					phoneNumber: "18513780630"
				});
			},
			toSet: function() {
				uni.navigateTo({
					url: 'set/set'
				})
			}
		}
	}
</script>

<style>
	.tui-item-box {
		padding-left: 10px !important;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-my-bg {
		width: 100%;
		height: 464rpx;
		display: block;
	}




	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}

	.tui-logo {
		height: 52rpx;
		width: 52rpx;
		flex-shrink: 0;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-right-dot {
		height: 76rpx !important;
		padding-bottom: 10rpx !important;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>
